<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: www.wo-shop.net
 * @Contact: QQ:2487937004
 * @LastEditors: wzb
 * @LastEditTime: 2020-12-02 13:39:04
-->
<template>
	<div>
		<wxc-popup popup-color="rgba(0, 0,0,0)" height="330" :show="isShow"
			@wxcPopupOverlayClicked="popupOverlayHideClick" pos="bottom" ref="tool">
			<div class="toolContent">
				<text class="toolTit"> 工具</text>
				<div class="tooItem">
					<text class="toolLeft">清晰度</text>
					<div class="toolRight">

						<div class="toolRightItem" v-for="(item,index) in brightList" :key="index"
							@click="modeTab(index,item.mode)">
							<div class="toolRightItemCircle" :class="{toolRightItemCircleActive:modeCurrent===index}">
							</div>
							<text class="colorWhite"
								:class="{toolRightItemNameActive:modeCurrent===index}">{{item.name}}</text>
						</div>

					</div>
				</div>

				<div class="tooItem">
					<text class="toolLeft"> 美颜</text>
					<div class="toolRight">
						<div class="toolRightItem" v-for="(item,index) in beautyList" :key="index"
							@click="beautyTab(index,item.rank,'beautyCurrent','beautyLevel')">
							<div class="toolRightItemCircle" :class="{toolRightItemCircleActive:beautyCurrent===index}">
							</div>
							<text class="colorWhite"
								:class="{toolRightItemNameActive:beautyCurrent===index}">{{item.name}}</text>
						</div>
					</div>
				</div>

				<div class="tooItem">
					<text class="toolLeft"> 美白</text>
					<div class="toolRight">
						<div class="toolRightItem" v-for="(item,index) in whitenessList" :key="index"
							@click="beautyTab(index,item.rank,'whitenessCurrent','whitenessLevel')">
							<div class="toolRightItemCircle"
								:class="{toolRightItemCircleActive:whitenessCurrent===index}"></div>
							<text class="colorWhite"
								:class="{toolRightItemNameActive:whitenessCurrent===index}">{{item.name}}</text>
						</div>
					</div>
				</div>

				<div class="tooItem">
					<text class="toolLeft">摄像头</text>
					<div class="toolRight">
						<div class="toolRightItem">
							<div class="u-flex" @click="onchange">
								<div class="toolRightItemCircle"
									:class="{toolRightItemCircleActive:isCameraFront===true}"></div>
								<text class="colorWhite switchFrontText cameraText"
									:style="{color:isCameraFront?'#05FF80':'#fff'}">前置</text>
							</div>
							<div class="u-flex" @click="onchange">>
								<div class="toolRightItemCircle"
									:class="{toolRightItemCircleActive:isCameraFront===false}"></div>
								<text :style="{color:!isCameraFront?'#05FF80':'#fff'}"
									class="colorWhite switchFrontText cameraText">后置</text>
							</div>
						</div>
					</div>
				</div>
				<div class="tooItem">
					<text class="toolLeft">自动聚焦</text>
					<div class="toolRight">

						<div v-for="(item,index) in foucsList" class="toolRightItem" @click="onFocusChange(index)">
							<div class="toolRightItemCircle"
								:class="{toolRightItemCircleActive:autoFocusIndex===index}"></div>
							<text class="colorWhite switchFrontText"
								:class="{toolRightItemNameActive:autoFocusIndex===index}">{{item.name}}</text>
						</div>
					</div>
				</div>
				<div class="tooItem">
					<text class="toolLeft">麦克风</text>
					<div class="toolRight">
						<div v-for="(item,index) in muteList" class="toolRightItem" @click="onmuteChange(index)">
							<div class="toolRightItemCircle" :class="{toolRightItemCircleActive:muteIndex===index}">
							</div>
							<text class="colorWhite switchFrontText"
								:class="{toolRightItemNameActive:muteIndex===index}">{{item.name}}</text>
						</div>
					</div>
				</div>
			</div>
		</wxc-popup>
	</div>
</template>

<script>
	import {
		WxcIcon,
		WxcPopup,
	} from "weex-ui"

	export default {
		name: 'toolPop',
		data() {
			return {
				checked: false,
				modeCurrent: 1,
				isCameraFront: true,
				cameraIndex: 0,
				autoFocusIndex: 0,
				muteIndex: 0,
				whitenessCurrent: 2, //当前美白选中选项
				beautyCurrent: 2, // 当前美颜选中选项
				config: {
					"background": "tranparent"
				},

				brightList: [{
						isOn: false,
						mode: "SD",
						name: 'SD'
					},
					{
						isOn: false,
						mode: "HD",
						name: 'HD'
					},
					{
						isOn: false,
						mode: "FHD",
						name: 'FHD'
					}
				],
				whitenessList: [{
						isOn: false,
						name: '关闭',
						rank: 0
					},
					{
						isOn: false,
						name: '一级',
						rank: 2
					},
					{
						isOn: false,
						name: '二级',
						rank: 4
					},
					{
						isOn: true,
						name: '三级',
						rank: 6
					}, {
						isOn: false,
						name: '四级',
						rank: 9
					}
				]

			}
		},
		computed: {
			cameraList() {
				return [{
						name:  '前置',
						isSelected: true
					},
					{
						name:  '后置',
						isSelected: false
					},
				]
			},
			foucsList() {
				return [{
						name:  '是',
						isSelected: true
					},
					{
						name:  '否',
						isSelected: false
					},
				]
			},
			muteList() {
				return [{
						name:  '开启',
						isSelected: true
					},
					{
						name:  '关闭',
						isSelected: false
					},
				]
			},

			beautyList() {
				return [{
						isOn: false,
						name:  '关闭',
						rank: 0

					}, {
						isOn: false,
						name:  '一级',
						rank: 2
					},
					{
						isOn: false,
						name:  '二级',
						rank: 4
					},
					{
						isOn: false,
						name:  '三级',
						rank: 6
					}, {
						isOn: true,
						name:  '四级',
						rank: 9
					}
				]
			}

		},
		props: {
			isShow: {
				type: Boolean,
				required: false,
				default: false,
			}
		},
		components: {
			WxcPopup,
			WxcIcon,
		},

		methods: {
			popupOverlayHideClick(e) {

				// 蒙层关闭  手动将父组件 isToolShow返回原位false
				this.$parent.isToolShow = false
				this.$parent.isShowMessage = true

			},
			switch2Change: function(e) {
				console.log('switch2 发生 change 事件，携带值为', e.target.value)
			},
			onchange() {
				this.$parent.switchCamera()
			},
			onFocusChange(index) {
				this.autoFocusIndex = index
				this.$parent.autoFocus = !this.$parent.autoFocus

			},
			onmuteChange(index) {
				this.muteIndex = index
				this.$parent.isMute = !this.$parent.isMute

			},
			modeTab(index, type) {
				this.modeCurrent = index
				this.$parent.codeRate = type
			},
			beautyTab(index, rank, type, level) {
				this[type] = index
				this.$parent[level] = rank
			}
		}
	}
</script>

<style scoped>
	.tooItem {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40upx;
		z-index: 99999;
	}

	.colorWhite {
		color: #fff;
		font-size: 26upx;
	}

	.toolContent {
		padding: 25upx;
		border-top-right-radius: 24upx;
		border-top-left-radius: 24upx;
		background-color: rgba(0, 0, 0, 0.7);
		height: 600upx;
		padding-bottom: 40upx;
		width: 750upx
	}

	.toolLeft {
		font-size: 32upx;
		font-weight: 600;
		color: #fff;
	}

	.toolRight {
		flex-direction: row;
		align-items: center;

	}

	.toolRightItem {
		flex-direction: row;
	}

	.toolSwitch {
		margin: 10upx;
	}

	.toolTit {
		text-align: center;
		color: #fff;
		font-weight: 600;
		font-size: 40upx;
		margin: 10upx 0 40upx 0;
	}

	.toolRightItemCircle {
		width: 34upx;
		height: 34upx;
		border-width: 3upx;
		border-style: solid;
		border-color: #999;
		margin-left: 20upx;
		margin-right: 4upx;
		border-radius: 200px;
	}

	.toolRightItemCircleActive {
		background-color: #05FF80;
		border-width: 0;
	}

	.toolRightItemNameActive {
		color: #05FF80;
	}

	.cameraText {
		padding: 10upx 8upx;
	}

	.u-flex {
		flex-direction: row;
		align-items: center;
	}
</style>
